@theme-ui/core
@theme-ui/core
provides minimal React support for lightweight usage.
npm i @theme-ui/core @emotion/react
Usage
import { ThemeProvider } from '@theme-ui/core'
export function App() {
return (
<ThemeProvider theme={{ colors: { primary: '#33e' } }}>
<h1 sx={{ color: 'primary' }}>Hello</h1>
</ThemeProvider>
)
}
If you already use theme-ui
package, the batteries-included version of Theme
UI, you don't need to install @theme-ui/core
separately — it's already in your
node_modules, and theme-ui
reexports everything from it.
API
jsx
— JSX function to create React elements supporting sx
propThemeProvider
— a context provideruseThemeUI
— a hook to access your thememerge
— an utility function to deeply merge themes together
Note that @theme-ui/core
doesn’t add global or root styles to
<html>
/<body>
. Refer to the
Global Styles docs for how to add
global styles.
JSX Runtime
As @theme-ui/core
defines jsx
function and types for it, you can use it to
configure JSX runtime without installing theme-ui
package.
Entry point /jsx-runtime
Entry point /jsx-dev-runtime